import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import { Menu, Badge } from 'antd';
import { HomeOutlined, VideoCameraOutlined, ShopOutlined, ShoppingCartOutlined, UserOutlined, StarOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import './Navbar.css';

const Navbar = () => {
  const location = useLocation();
  const cartItemsCount = 2; // 这里应该从全局状态或本地存储获取购物车商品数量
  const favoritesCount = 3; // 这里应该从全局状态或本地存储获取收藏数量

  const items = [
    {
      key: '/',
      icon: <HomeOutlined />,
      label: <Link to="/">首页</Link>,
    },
    {
      key: '/movies',
      icon: <VideoCameraOutlined />,
      label: <Link to="/movies">电影</Link>,
    },
    {
      key: '/cinemas',
      icon: <ShopOutlined />,
      label: <Link to="/cinemas">影院</Link>,
    },
    {
      key: '/favorites',
      icon: (
        <Badge count={favoritesCount} size="small">
          <StarOutlined />
        </Badge>
      ),
      label: <Link to="/favorites">收藏</Link>,
    },
    {
      key: '/cart',
      icon: (
        <Badge count={cartItemsCount} size="small">
          <ShoppingCartOutlined />
        </Badge>
      ),
      label: <Link to="/cart">购物车</Link>,
    },
    {
      key: '/help',
      icon: <QuestionCircleOutlined />,
      label: <Link to="/help">帮助中心</Link>,
    },
    {
      key: '/profile',
      icon: <UserOutlined />,
      label: <Link to="/profile">我的</Link>,
    },
  ];

  return (
    <Menu
      mode="horizontal"
      selectedKeys={[location.pathname]}
      items={items}
      className="navbar"
    />
  );
};

export default Navbar; 